<style scoped>
.spage {
  text-align: right;
  margin-top: 10px;
}
</style>


<template>
    <div>
        <Table 
		ref="table" 
		:loading="loading" 
		:url="url"
		:formData="formData"
		:transformRequest="transformRequest"
		:transformResponse="transformResponse"
		:columns="columns"
		:data="data" 
		v-bind="attrs" 
		v-on="$listeners" 
		@on-sort-change='sortChange'></Table>

		<spage 
		ref="page"  
		v-if="!hidePage"  
		class="spage"  
		:total="total" 
		:current="formdata.page" 
		:pageSize="formdata.rows"
		@on-update='updateList'></spage>
    </div>
</template>

<script>
import spage from './spage';
import HttpService from '@mods/service/baseHttp'
export default {
	inheritAttrs: false,
	components: {
		spage,
	},
	props: {
		url: String,
		formData: Object,
		localData: Array,
		transformRequest: Function,
		transformResponse: Function,
		hidePage: Boolean,
		columns: Array,
	},
	data() {
		return {
			loading: false,
			data: [],
			total: 0,
			formdata: null,
		};
	},
	created() {
		this.formdata = {
			page: 1,
			rows: 10,
			sidx: 'id',
			sord: 'desc',
			...this.formData,
		};
	},
	computed: {
		attrs() {
			return { size: 'small', border: true, stripe: true, ...this.$attrs };
		},
	},
	mounted() {
		this.getList();
	},

	methods: {
		sortChange({ column, key, order }) {
			this.updateList({ sidx: key, sord: order });
		},
		updateList(data) {
			this.getList(data);
		},
		async getList(formdata = {}) {
			if (this.localData) {
				this.data = this.localData;
				return;
			}
			this.loading = true;
			this.formdata = { ...this.formdata, ...formdata };
			const response = await HttpService.post(process.env.VUE_APP_APIURL_SHIP+this.url, this.formdata).catch(error => {
				this.loading = false;
				this.data = [];
				this.$Message.error(error.message);
			});
			if (response) {
				const data = response.data || {};
				this.loading = false;
				this.data = data.content || [];
				this.total = data.totalElements || 0;
			}
		},
	},
};
</script>


